s<template>
  <div class="app-container">
    <LogsFormFilter @on-filter="submitFilterForm" />
    <div class="button-group" style="padding: 20px 0">
      <!-- <el-button-group>
        <el-button
          v-if="roleCheck(finaRechargeType.autoBatchRepair)"
          size="mini"
          type="primary"
          @click="onClickMultipApply"
        >
           {{ $t('language.finance.recharge.batchReplenishment') }}
        </el-button>
      </el-button-group> -->
    </div>
    <el-table
      :data="tableData.list"
      height="500"
      v-loading="loading"
      element-loading-text="加载中..."
      border
      show-summary
      :summary-method="getLocalSummaries"
      class="el-table-align-center"
      ref="tableList"
    >
      <el-table-column :label="$t('language.finance.recharge.rechargeTime')" width="90" align="center">
        <template slot-scope="{row}">
          <div>{{row.createDate | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.rechargeNumber')" width="120" align="center">
        <template slot-scope="{row}">
          <div>{{row.orderId}}</div>
        </template>
      </el-table-column>
<!--      <el-table-column :label="$t('language.finance.recharge.thirdPartyRechargeOrderNumber')" width="120" align="center">-->
<!--        <template slot-scope="{row}">-->
<!--          <div>{{row.thirdOrderId}}</div>-->
<!--        </template>-->
<!--      </el-table-column>-->
     <el-table-column :label="$t('language.finance.recharge.accountType')" prop="userType" align="center">
        <template slot-scope="{row}">
<!--          {{getLabel(row.userType, payEnum.USER_TYPE)}}-->
          {{toSwitchData('language.finance.consts.USER_TYPE', row.userType)}}
        </template>
     </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.level')" prop="userLevel" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.accountName')" prop="username" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.name')" prop="reallyName" align="center">
      </el-table-column>
      <el-table-column sortable :label="$t('language.finance.recharge.depositAmount')" prop="amount" width="100" align="center">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column sortable :label="$t('language.finance.recharge.handlingFee')" prop="fee" width="90" align="center">
        <template slot-scope="{row}">
          {{row.fee | currency('', 2, {type: 1})}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.operatingTime')" width="90" align="center">
        <template slot-scope="{row}">
          {{row.createDate | toTime}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.depositType')" width="90" align="center">
        <template slot-scope="{row}">
<!--          {{getLabel(row.limitType, payEnum.DEPOSIT_TYPE)}}-->
          {{toSwitchData('language.finance.consts.DEPOSIT_TYPE', row.limitType)}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.paymentStatus')"  align="center">
        <template slot-scope="{row}">
<!--            <span v-if="row.subStatus != 0">{{row.subStatus | toConverter('PAYMENT_STATUS')}}</span>-->
            <span v-if="[1,2].includes(row.status)" >{{toSwitchData('language.finance.consts.PAYMENT_SUB_STATUS', row.subStatus)}}</span>
<!--            <span v-else>{{row.status | toConverter('PAYMENT_STATUS')}}</span>-->
<!--          <span v-else>{{row.status | toConverter('PAYMENT_STATUS') }}</span>-->
          <span v-else>{{toSwitchData('language.finance.consts.PAYMENT_STATUS_BACK', row.status)}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.paymentTypes')" align="center">
        <template slot-scope="{row}">
          {{row.paymentId | toConverter('RECHARGE_TYPE_NAMES')}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.receiptMerchant')" width="100" prop="bankName" align="center">
        <template slot-scope="{row}">
          <div>{{row.channelName }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.receiptMerchantNumber')" width="150" prop="bankName" align="center">
        <template slot-scope="{row}">
          <div>{{row.merchantCode }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.operationEnd')"  align="center" >
        <template slot-scope="{row}">
          {{row.clientType | toConverter('PAYMENT_PLATFORM') }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.remarks')" prop="sucReqRemark" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.table.actions')" fixed="right" width="220" align="center">
        <template slot-scope="{row}">
          <!--     补单     -->
          <el-button
            type="warning"
            size="mini"
            @click="openDialog({dialogName: dialogType.applyReorder, props: row })"
            v-if="roleCheck(finaRechargeType.autoRepair) && checkShowOpt(row)"
          >
            {{$t('language.finance.recharge.makeUp')}}
          </el-button>
          <!--<el-button-->
            <!--type="danger"-->
            <!--size="mini"-->
            <!--@click="openDialog({dialogName: dialogType.refusedReorder, props: row })"-->
            <!--v-if="roleCheck(finaRechargeType.autoRepair) && row.status !==3"-->
          <!--&gt;-->
            <!--{{$t('language.finance.recharge.RefuseMakeUp')}}-->
          <!--</el-button>-->
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="gridSizeChange"
        @current-change="gridCurrentChange"
        :current-page="filters.page"
        :page-sizes="gridPageSize"
        :page-size="filters.size"
        :layout="gridLayout"
        :total="tableData.total"
      />
    </div>
    <ApplyReorderDialog
      v-if="dialogName === dialogType.applyReorder"
      :row-data="dialogProps"
      :page="1"
      v-model="dialogVisible"
      :id="dialogProps.id"
      @submit="submitFinished"
    />
    <RefusedReorderDialog
      v-if="dialogName === dialogType.refusedReorder"
      :row-data="dialogProps"
      v-model="dialogVisible"
      :id="dialogProps.id"
      @submit="submitFinished"
    />
    <MultipleRechargeDialog
      v-if="dialogName === dialogType.multipleRecharge"
      v-model="dialogVisible"
      @multipleNext="onClickMultipleNext"
    />
    <ConfirmMultipleDialog
      v-if="dialogName === dialogType.confirmMultiple"
      v-model="dialogVisible"
      :row-data="dialogProps"
    />
  </div>
</template>


<script>

// constants
import { finaRechargeType } from '@/router/financeRoutes';

// components
import LogsFormFilter from './logsFormFilter';
import ApplyReorderDialog from './applyReorderDialog';
import RefusedReorderDialog from './refusedReorderDialog';
import ConfirmMultipleDialog from './confirmMultipleDialog';
import MultipleRechargeDialog from './multipleRechargeDialog';

// mixins
import {
  grid, constsLabel, dialog, switchData,
} from '@/build';

// services
import {
  getRechargeLogs,
} from '@/services/api/recharge';
import moment from 'moment';

const dialogType = {
  applyReorder: 'apply-reorder-dialog',
  refusedReorder: 'refused-reorder-dialog',
  multipleRecharge: 'multiple-recharge-dialog',
  confirmMultiple: 'confirm-multiple-dialog',
};

export default {
  name: 'recharge-logs',
  components: {
    LogsFormFilter,
    ApplyReorderDialog,
    RefusedReorderDialog,
    ConfirmMultipleDialog,
    MultipleRechargeDialog,
  },
  mixins: [grid, constsLabel, dialog, switchData],
  data() {
    return {
      finaRechargeType,
      tableData: {},
      filters: {
        page: 1,
        size: 20,
        dateType: 1,
        status: '0,3',
        subStatus: '5,6',
        searchType: 1,
        limitType: -1,
        paymentId: -2,
        userType: -1,
        startTime: moment().format('YYYY-MM-DD 00:00:00'),
        endTime: moment().format('YYYY-MM-DD 23:59:59'),
        clientType: -1,
      },
      dialogType,
      statistic: [
        {
          index: 2,
          prop: '',
          format: value => '',
        },
        {
          index: 6,
          prop: 'amount',
          format: value => _.currency(value),
        },
        {
          index: 7,
          prop: 'fee',
          format: value => _.currency(value, '', 2, { type: 1 }),
        },
        {
          index: 15,
          prop: '',
          format: value => '',
        },
      ],
    };
  },
  watch: {
    tableData: {
      handler(newVal) {
        this.$nextTick(() => {
          this.$refs.tableList.doLayout(); // 获取表格数据后，从新计算表格布局，防止表格错位的问题
        });
      },
    },
  },
  methods: {
    onClickMultipApply() {
      this.openDialog({ dialogName: dialogType.multipleRecharge });
    },
    onClickMultipleNext(data) {
      this.openDialog({ dialogName: dialogType.confirmMultiple, props: data });
    },
    checkShowOpt(row) {
      const { subStatus, status } = row;
      if (status === 2) {
        return subStatus === 5 || subStatus === 6;
      }
      return status === 0;
    },
    submitFilterForm(formInline) {
      const { time } = formInline;
      let startTime;
      let endTime;
      if (!_.isUndefined(time) && _.isArray(time)) {
        startTime = moment(time[0]).format('YYYY-MM-DD HH:mm:ss');
        endTime = moment(time[1]).format('YYYY-MM-DD HH:mm:ss');
        formInline = { ...formInline, startTime, endTime };
      } else {
        this.filters.startTime = undefined;
        this.filters.endTime = undefined;
      }
      if (!formInline.subStatus) {
        delete this.filters.subStatus;
      }

      this.filters = { ...this.filters, ...formInline };
      this.gridSearch();
    },
  },
  mounted() {
    this.bindGet(getRechargeLogs, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      beforeSend: (data) => {
        delete data.time;
        if (Array.isArray(data.status)) {
          delete data.status;
        }
        return data;
      },
      format: (data) => {
        const { list = [] } = data;
        if (!(Array.isArray(list) && list.length)) return [];
        const resList = list.map(item => ({
          ...item,
          paragraph: item.amount - item.fee,
          // fee: _.currency(item.fee, '' , 2 , { type: 1 }),
        }));
        return {
          ...data,
          list: resList,
        };
      },
    });
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
  /deep/ {
    thead .cell{
      word-break: break-word;
    }
    .el-table-align-center{
      .el-table__body-wrapper{
        max-height: 416px;
      }
    }
    .el-table__fixed-right{
      .el-table__fixed-body-wrapper{
        max-height: 416px;
      }
    }
  }
</style>
